<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<%
	pageContext.setAttribute("APP_PATH",request.getContextPath());
	
%>

<title>员工列表</title>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 
	不以/开始的的相对路径，找资源，以当前资源的路径为基准，容易出问题
	以/开始的相对路径，找资源，以服务器路径为基准。需要加上项目名
	
	//上面的%内部 以斜线开始 所以用的时候 不加斜线
-->
<script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.11.0.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${APP_PATH }static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<!-- 显示页面 -->
<div class="container">
	<!-- 标题 -->
	<div class="row">
		 <div class="col-md-12" role="main" >
		 	<h1>SSM-CRUD</h1>
		 </div>	
	</div>
	<!-- 两个按钮  因为是右边显示所以使用列偏移-->
	<div class="row">
	
		 <div class="col-md-2 col-md-offset-10">
		  	<button type="button" class="btn btn-primary">增加</button>
		  	<button type="button" class="btn btn-info">删除</button>
		 </div> 
	</div>
	<br>
	<!-- 显示数据 -->
	 <div class="row">
	 	<div class="col-md-12 ">
 			<table class="table table-hover">
   				<tr>
   					<th>#</th>
   					<th>LastName</th>
   					<th>Email</th>
   					<th>gender</th>
   					<th>DeptName</th>
   					<th>操作</th>
   				</tr>
   				<c:forEach items="${pageInfo.list}" var="emp">
   					<tr>
   					<td>${emp.empId}</td>
   					<td>${emp.empName}</td>
   					<td>${emp.email}</td>
   					<td>${emp.gender} </td>
   					<td>${emp.department.deptName}</td>
   					<td>
   					<button type="button" class="btn btn-warning btn-sm">
   						<span class="glyphicon glyphicon-edit " aria-hidden="true" ></span>
   							编辑</button>
		  			<button type="button" class="btn btn-info btn-sm">
		  			<span class="glyphicon glyphicon-remove-sign " aria-hidden="true"></span>
		  					删除</button>
		  			</td>
   				</tr>
   				</c:forEach>
 			</table>
		</div>
	</div> 
	<div class="row">
		<div class="col-md-6">
			<p >当前第的${pageInfo.pageNum}页,一共有 ${pageInfo.pages }页，总记录是${pageInfo.total }条</p>
		</div>
		<!-- 显示页数指数 -->
		<div class="col-md-6">
			<nav >
			  <ul class="pagination">
			  <li><a href="${APP_PATH }/emps?pn=1">首页</a></li>
			    <c:if test="${pageInfo.hasPreviousPage }">
			   		 <li>
			     	 <a href="${APP_PATH }/emps?pn=${pageInfo.prePage}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
			      </c:if>
			    </li>
			    <c:forEach items="${pageInfo.navigatepageNums}" var="nav">
			   		 <c:if test="${nav==pageInfo.pageNum }">
			    	 	<li class="active"><a href="#">${nav}</a></li>
			    	</c:if>
			    	 <c:if test="${nav!=pageInfo.pageNum }">
			    	 	<li><a href="${APP_PATH }/emps?pn=${nav}">${nav}</a></li>
			    	</c:if>
			     </c:forEach>
			     <c:if test="${pageInfo.hasNextPage }">
			      <li><a href="${APP_PATH}/emps?pn=${nextPage}" aria-label="Next"> <span aria-hidden="true">&raquo;</span></a></li>
			      </c:if>
			      <li><a href="${APP_PATH }/emps?pn=${pageInfo.pages}">末页</a></li>
			  </ul>
			</nav>
		</div>
	</div>
</div>
<body>
</body>
</html>
